<template>
  <div class="login-wrap">
    <div class="shell">
      <div class="left">
        <div class="line"></div>
      </div>
      <div class="right">
        <h4>Welcome</h4>
        <p>欢迎登陆车辆综合服务平台</p>
        <el-form :model="userInfo" :rules="rules" ref="login" label-width="0px" class="ms-content">
          <el-form-item prop="username">
            <el-input class="user-name" v-model="userInfo.username" placeholder="请输入用户名">
              <template slot="prefix">
                <i class="el-icon-user icon-user"></i>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item style="margin-bottom: 0;" prop="password">
            <el-input class="pass-word" type="password" placeholder="请输入密码" v-model="userInfo.password"
              @keyup.enter.native="submitForm()">
              <template slot="prefix">
                <i class="el-icon-lx-lock icon-user"></i>
              </template>
            </el-input>
          </el-form-item>
          <el-button class="login-btn" @click="submitForm()">登录</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { setToken } from '@/utils/token';
import { setUserInfo } from '@/utils/userInfo';
export default {
  data: function () {
    return {
      userInfo: {
        username: 'admin',
        password: 'admin',
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.login.validate(async valid => {
        if (valid) {
          let userInfo = this.$QS.stringify(this.userInfo)
          let res = await this.$API.Admin.reqLogin(userInfo);
          if (res.code == 200) {
            let token = res.data.token;
            let user = { img: res.data.img, username: res.data.username, phone: res.data.phone, id: res.data.id, rid: res.data.rid }
            setToken(token);
            setUserInfo(user);
            this.$router.push('/');
            this.$message.success('登录成功');
          } else {
            this.$message.error(res.msg);
          }
        } else {
          this.$message.error('请输入账号和密码');
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
  outline: none;
}

.login-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #242f42, #324157);
}

.shell {
  display: flex;
  border-radius: 20px;
  height: 435px;
  background-color: rgb(255, 255, 255);
  box-shadow: 2px 10px 12px 0px rgba(5, 5, 5, 0.597);
  border-radius: 3;
}

.left {
  width: 220px;
  height: auto;
  background-image: url(../../assets/img/login-bg.jpg);
  background-size: cover;
  position: relative;
  border-radius: 20px 0 0 20px;
}

.right {
  width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 30px;

}

.right h4 {
  font-size: 35px;
  color: #242f42(0, 0, 0, 0.4);
  margin-bottom: 20px;
}

.right p {

  max-width: 220px;
  font: 16px '';
  margin-bottom: 40px;
}

.pass-word,
.user-name {
  display: flex;
  width: 100%;
}

.icon-user {
  font-size: 20px;
  line-height: 33px;
  margin-left: 3px;

}

.login-btn {
  min-width: 100px;
  border-radius: 24px;
  text-align: center;
  padding: 15px 40px;
  font-size: 14px;
  margin-left: auto;
  font-weight: 500;
  box-shadow: 0px 2px 6px -1px rgba(0, 0, 0, 0.613);
  border: none;
  margin-top: 80px;

}

.line {
  width: 345px;
  height: 1px;
  border-bottom: 6px inset #3a31409a;
  position: absolute;
  bottom: 103px;
  right: -345px;
}
</style>